<template>
	<view>
		<view class="aa">
			<view class="status_bar">
			</view>
			<view class="bt">
				<view class="titleLeftButton" @click="backButton">《</view>  
			</view>
			<view class="aa1" style="margin-top:250rpx;margin-left:30rpx;">
				<view style="display: flex;">
					<view style="width:130rpx;height:130rpx;border-radius: 50%;margin-top:-40rpx;margin-left:60rpx">
						<image style="width:100%;height:100%" src="../../static/images/fq/g.png" mode=""></image>
					</view>
					<view class="ab">
						编辑资料
					</view>
				</view>
				<view style="font-size: 30rpx;font-weight: 600;margin-left:40rpx;margin-top:20rpx">
					CT——185***3023
				</view>

				<view class="mycenter-fensi" style="margin-top:40rpx">
					<view class="mycenter-fensiitem">
						<view>1</view>
						<view>关注</view>
					</view>
					<view class="mycenter-fensiitem">
						<view>0</view>
						<view>粉丝</view>
					</view>
					<view class="mycenter-fensiitem">
						<view>352</view>
						<view>获赞</view>
					</view>
					<view class="mycenter-fensiitem">
						<view>1</view>
						<view>收藏</view>
					</view>
				</view>
			</view>

			<image style="width:100%;height:100%;margin-top:-50rpx" src="../../static/images/fq/b.png"
				mode="aspectFill"></image>

		</view>
		<view class="aa2" style="margin-top:270rpx;margin-left:30rpx;padding:10rpx;height:550rpx">
			<view class="">
				<!-- 上面动态切换 -->
				<view class="title-view" style="margin-top:25rpx;margin-left:20rpx;">
					<text @tap="changeIndex(index)" class="text-view" :class="{'active':currentIndex==index}"
						v-for="(item,index) in list" :key="item" style="margin-left:30rpx;">{{item}}</text>
				</view>

				<!-- 下面滑块 -->
				<swiper :current="currentIndex" @change="changetab" style="height:50vh">
					<swiper-item>
						<view v-if="currentIndex == 0">
							<view style="display: flex;">
								<view
									style="width:100rpx;height:100rpx;border-radius: 50%;margin-top: 20rpx;margin-left:40rpx">
									<image style="width:100%;height: 100%;" src="../../static/images/fq/g.png" mode="">
									</image>
								</view>
								<view>
									<view style="margin-left:20rpx;margin-top:30rpx;font-size: 30rpx;font-weight: 600;">
										CT-185***3023
									</view>
									<view style="margin-left:20rpx;font-size: 25rpx;font-weight: 600;">
										2021/4/23
									</view>
								</view>

							</view>
							<view style="margin-top:30rpx;margin-left:40rpx;font-size: 30rpx;font-weight: 600;">
								坐标苏州,近期看车可以私聊我
							</view>
							<view style="display: flex;">
								<view style="width:220rpx;height:180rpx;border:1px ;margin-left:40rpx;margin-top:20rpx">
									<image style="width:100%;height:100%" src="../../static/images/fq/mj3.png" mode="">
									</image>
								</view>
								<view style="width:220rpx;height:180rpx;border:1px ;margin-left:40rpx;margin-top:20rpx">
									<image style="width:100%;height:100%" src="../../static/images/fq/mj2.png" mode="">
									</image>
								</view>
							</view>
							<view style="display: flex;">
								<view
									style="width:125rpx;height:45rpx;margin-top:20rpx;margin-left:40rpx;display: flex;">
									<image style="width: 50%;height:100%;" src="../../static/images/fq/fx.png"
										mode="aspectFill"></image>
									<text style="font-size: 25rpx;font-weight: 600;line-height: 45rpx;">分享</text>
								</view>
								<view style="width:70rpx;height:45rpx;margin-top:20rpx;margin-left:40rpx">
									<image style="width: 100%;height:100%;" src="../../static/images/fq/pl.png"
										mode="aspectFill"></image>
								</view>
								<view style="width:55rpx;height:45rpx;margin-top:20rpx;margin-left:40rpx">
									<image style="width: 100%;height:100%;" src="../../static/images/fq/z.png"
										mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view v-if="currentIndex == 1"><text>选项卡2的内容</text></view>
					</swiper-item>
					<swiper-item>
						<view v-if="currentIndex == 2"><text>选项卡3的内容</text></view>
					</swiper-item>
				</swiper>
			</view>

		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				list: ["动态", "相册", "车辆"],
				swiper: ["A", "B", "C"],
				currentIndex: 0,
			}
		},
		methods: {
			changeIndex(index) {
				this.currentIndex = index;
			},
			changetab(e) {
				this.currentIndex = e.detail.current;
			},
			backButton(){
			        uni.navigateBack()  
			    }
		}
	}
</script>

<style lang="scss">
	.bt {
		width: 750rpx;
		height: 56rpx;
		position: absolute;
		top: 104rpx;
		font-family: PingFang SC;
		font-size: 40rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 56rpx;
		letter-spacing: 0rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 30rpx;
	}
	.aa2 {
		width: 690rpx;
		height: 286rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
	}

	.mycenter-fensi {
		height: 96rpx;
		width: 600rpx;
		margin: 0 auto;
		justify-content: space-between;
		color: black;
		display: flex;

		.mycenter-fensiitem {
			text-align: center;
			font-size: 24rpx;
			padding: 10rpx;
			font-weight: 600;
		}
	}

	.ab {
		width: 190rpx;
		height: 70rpx;
		border: 1px solid orange;
		margin-left: 230rpx;
		margin-top: 30rpx;
		border-radius: 60rpx;
		font-size: 32rpx;
		line-height: 70rpx;
		text-align: center;
		font-weight: 600;
		color: orange
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		/* height: 140rpx; */
	}

	.aa {
		width: 750rpx;
		height: 350rpx;
		position: relative;
	}

	.aa1 {
		position: absolute;
		width: 690rpx;
		height: 304rpx;
		/* margin-top:10rpx; */
		background-color: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
	}

	.aa2 {
		width: 690rpx;
		height: 286rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
	}

	.w {
		width: 47%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: 800;
		margin-top: 10rpx;
	}

	.aa12 {
		width: 264rpx;
		height: 40rpx;
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #252525;
	}
</style>
